<template>
    <div class="login-wrap">
        <el-form class="login-container">
            <h1 class="title">用户登录</h1>
            <el-form-item label="">
                <el-input type="text" v-model="username" placeholder="登录账号" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="">
                <el-input type="password" v-model="password" placeholder="登录密码" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" style="width:100%;" @click="login()">提交</el-button>
            </el-form-item>
            <el-row style="text-align: center;margin-top:-10px">
                <el-link type="primary" @click="superUser">管理员登录</el-link>
                <el-link type="primary" @click="gotoRegister">用户注册</el-link>
            </el-row>
        </el-form>
    </div>
</template>

<script>
import axios from 'axios';
import router from '@/router';

export default {
    data() {
        return {
            username: '',
            password: '',
            error: ''
        };
    },
    methods: {
        async login() {
            try {
                const params = new URLSearchParams({
                    username: this.username,
                    password: this.password
                });
                const response = await axios.get('http://localhost:8089/consumer/login?' + params.toString());
                if (response.data.code === 200) { // 检查响应码是否为 200 
                    // 登录成功，可以跳转到其他页面或执行其他操作  
                    router.push('/topview');
                    let userJson = JSON.stringify(response.data.data);
                    localStorage.setItem("user",userJson );
                    setTimeout(() => {
                        localStorage.removeItem("user");
                    }, 10 * 60 * 1000);
                    console.log('Login successful!');
                } else {
                    // 登录失败，显示错误信息  
                    alert("您的账号或者密码错误，请确保已经注册或输入了正确账号密码！")
                    this.error = response.data.message;
                }
            } catch (error) {
                // 请求发生错误，显示通用错误信息  
                this.error = 'An error occurred during login.';
            }
        }
        , gotoRegister() {
            this.$router.push('index')

        }
        , superUser() {
            this.$router.push('/login')
        }

    }
};  
</script>

<style scoped>
.login-wrap {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding-top: 10%;
    background-image: url();
    /* background-color: #112346; */
    background-repeat: no-repeat;
    background-position: center right;
    background-size: 100%;
}

.login-container {
    border-radius: 10px;
    margin: 0px auto;
    width: 350px;
    padding: 30px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    text-align: left;
    box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
}

.title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
}
</style>
